<template>
  <div class="flex gap-6">
    <div class="w-[500px]">
      <div class="py-4 flex items-center gap-2 text-xl">
        <div class="example" />
        预览图片
      </div>
      <a-upload
        class="w-full"
        list-type="picture-card"
        action="/"
        :limit="1"
        image-preview
      />
    </div>
    <div class="flex-1">
      <div class="py-4 flex items-center gap-2 text-xl">
        <div class="example" />
        描述信息
      </div>
      <a-textarea
        placeholder="Please enter something"
        allow-clear
        class="h-[500px]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const fileList = ref([
  {
    uid: '-2',
    name: '20200717-103937.png',
    url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
  },
])
</script>

<style lang="scss" scoped>
* {
  :deep(.arco-upload-list-picture) {
    width: 500px;
    height: 500px;
  }
  :deep(.arco-upload-picture-card) {
    width: 500px;
    height: 500px;
  }
}
</style>
